<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>法人授权书模版</title>
    <style>
        body {
            background-color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .a4-container {
            width: 210mm;
            min-height: 297mm;
            padding: 30px 40px;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            box-sizing: border-box;
        }

        .title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            margin: 30px 0;
            letter-spacing: 2px;
        }

        .content-text {
            font-size: 16px;
            line-height: 2.5;
            margin: 10px 0;
        }

        .editable {
            display: inline-block;
            min-width: 50px;
            border-bottom: 1px solid #333;
            padding: 0 5px;
            margin: 0 3px;
            height: 24px;
            line-height: 24px;
            text-align: center;
        }

        .print-button {
            position: fixed;
            top: 50%;
            right: 20px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .print-button:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

        .signature-area {
            display: flex;
            justify-content: flex-end;
        }

        .signature-line {
            display: inline-block;
            width: 150px;
            border-bottom: 1px solid #333;
            text-align: center;
        }

        .upload-area {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .upload-title {
            margin-bottom: 10px;
        }

        .upload-row {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }

        .upload-box {
            width: 85.6mm;
            height: 54mm;
            border: 1px dashed #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .upload-btn {
            background-color: #f0f0f0;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        .id-card-preview {
            width: 85.6mm;
            height: 54mm;
            background-color: #f9f9f9;
            display: none;
        }

        .hidden {
            display: none;
        }

        .note {
            font-size: 14px;
            color: #666;
            margin-top: 30px;
            line-height: 1.8;
        }

        .section {
            margin-bottom: 40px;
        }

        .page-break {
            page-break-after: always;
        }

        @media print {
            body {
                background-color: transparent;
                padding: 0;
            }

            .a4-container {
                box-shadow: none;
                width: 210mm;
                min-height: 297mm;
                margin: 0;
                padding: 30px 40px;
            }

            .print-button, .upload-btn {
                display: none;
            }

            .upload-box {
                border: none;
            }

            .id-card-preview {
                display: block !important;
                border: 1px solid #ddd;
            }
        }
    </style>
</head>

<body>
    <div class="a4-container">
        <div class="section">
            <h2 class="title">法定代表人身份证明</h2>
            
            <p class="content-text">企业名称：<span class="editable company-name" contenteditable="true"></span></p>
            <p class="content-text">单位性质：<span class="editable" contenteditable="true"></span></p>
            <p class="content-text">地址：<span class="editable" contenteditable="true"></span></p>
            <p class="content-text">成立时间：<span class="editable" contenteditable="true"></span></p>
            <p class="content-text">经营期限：<span class="editable" contenteditable="true"></span></p>
            <p class="content-text">姓名：<span class="editable" contenteditable="true"></span>性别：<span class="editable" contenteditable="true"></span>年龄：<span class="editable" contenteditable="true"></span>职务：<span class="editable" contenteditable="true"></span>系<span class="editable company-name" contenteditable="true"></span>（企业名称）的法定代表人。</p>
            <p class="content-text">特此证明</p>
            
            <div class="upload-title">附：法定代表人身份证复印件(需同时提供正面及背面)</div>
            <div class="upload-area">
                <div class="upload-row">
                    <div class="upload-box">
                        <img id="legal-front-preview" class="id-card-preview">
                        <label class="upload-btn">
                            选择身份证正面<input type="file" accept="image/*" class="hidden" id="legal-front">
                        </label>
                    </div>
                    <div class="upload-box">
                        <img id="legal-back-preview" class="id-card-preview">
                        <label class="upload-btn">
                            选择身份证背面<input type="file" accept="image/*" class="hidden" id="legal-back">
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="signature-area">
                <div class="signature-box">
                    <p class="content-text">企业名称：<span class="editable company-name" contenteditable="true"></span>（盖单位章）</p>
                    <p class="content-text"><span class="editable year" contenteditable="true"></span>年<span class="editable month" contenteditable="true"></span>月<span class="editable day" contenteditable="true"></span>日</p>
                </div>
            </div>
        </div>
        <div class="page-break"></div>
        <div class="section">
            <h2 class="title">法定代表人授权委托书</h2>
            
            <p class="content-text"><span class="editable" contenteditable="true"></span>：</p>
            <p class="content-text"><span class="editable company-name" contenteditable="true"></span>（企业名称）法定代表人授权我单位<span class="editable" contenteditable="true"></span>（职务或职称）<span class="editable" contenteditable="true"></span>（姓名）为我单位本次应答授权代理人，全权处理<span class="editable" contenteditable="true"></span>的一切事宜。该授权代理人作出的所有承诺说明，我单位均予于认可并承担全部责任。</p>
            <p class="content-text">委托期限：<span class="editable" contenteditable="true"></span>。</p>
            <p class="content-text">代理人无转委托权。</p>
            <p class="content-text">特此授权。</p>
            
            <div class="upload-title">附：委托代理人身份证复印件(需同时提供正面及背面)</div>
            <div class="upload-area">
                <div class="upload-row">
                    <div class="upload-box">
                        <img id="agent-front-preview" class="id-card-preview">
                        <label class="upload-btn">
                            选择身份证正面<input type="file" accept="image/*" class="hidden" id="agent-front">
                        </label>
                    </div>
                    <div class="upload-box">
                        <img id="agent-back-preview" class="id-card-preview">
                        <label class="upload-btn">
                            选择身份证背面<input type="file" accept="image/*" class="hidden" id="agent-back">
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="signature-area">
                <div class="signature-box">
                    <p class="content-text">企业名称：<span class="editable company-name" contenteditable="true"></span>（盖单位章）</p>
                </div>
            </div>
            <div class="signature-area">
                <div class="signature-box">
                    <p class="content-text">法定代表人：<span class="signature-line"></span>（签字）</p>
                </div>
            </div>
            <div class="signature-area">
                <div class="signature-box">
                    <p class="content-text">委托代理人：<span class="signature-line"></span>（签字）</p>
                </div>
            </div>
            
            <div class="signature-area">
                <div class="signature-box">
                    <p class="content-text"><span class="editable year" contenteditable="true"></span>年<span class="editable month" contenteditable="true"></span>月<span class="editable day" contenteditable="true"></span>日</p>
                </div>
            </div>
            
            <p class="note">注：如无授权代表，全权由法定代表人负责一切事宜的，则无须提供法定代表人授权书。</p>
        </div>
    </div>
    
    <button class="print-button" onclick="window.print()">打印</button>
    
    <script>
        // 自动填充当前日期
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        
        document.querySelectorAll('.year').forEach(el => {
            el.textContent = year;
        });
        
        document.querySelectorAll('.month').forEach(el => {
            el.textContent = month;
        });
        
        document.querySelectorAll('.day').forEach(el => {
            el.textContent = day;
        });

        // 身份证选择功能
        function setupImageUpload(inputId, previewId) {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewId);
            
            input.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const file = this.files[0];
                    if (!file.type.match('image.*')) {
                        alert('请选择图片文件');
                        return;
                    }
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                        input.parentElement.style.display = 'none';
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
        
        // 设置四个选择功能
        setupImageUpload('legal-front', 'legal-front-preview');
        setupImageUpload('legal-back', 'legal-back-preview');
        setupImageUpload('agent-front', 'agent-front-preview');
        setupImageUpload('agent-back', 'agent-back-preview');
        
        // 自动填充企业名称功能
        document.addEventListener('DOMContentLoaded', function() {
            const companyNameElements = document.querySelectorAll('.company-name');
            
            // 为第一个企业名称输入框添加事件监听
            if (companyNameElements.length > 0) {
                companyNameElements[0].addEventListener('input', function() {
                    const companyName = this.textContent;
                    // 更新所有企业名称
                    companyNameElements.forEach(el => {
                        el.textContent = companyName;
                    });
                });
            }
        });
    </script>
</body>

</html>